import {StyleSheet} from 'react-native';
import px2dp from '../../utils/px2dp';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgb(250, 250, 250)',
  },
  avatar: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: px2dp(43),
    paddingTop: px2dp(30),
    paddingBottom: px2dp(80),
    backgroundColor: '#fff',
  },
  avatar_img: {
    width: px2dp(118),
    height: px2dp(118),
    backgroundColor: '#f7f7f7',
    borderRadius: px2dp(59),
    marginRight: px2dp(30),
  },
  avatar_text: {
    fontSize: px2dp(32),
    fontWeight: 'bold',
    color: '#333',
  },
  nav_container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginHorizontal: px2dp(24),
    paddingHorizontal: px2dp(23),
    backgroundColor: '#fff',
    borderRadius: px2dp(24),
    marginTop: px2dp(-50),
  },
  nav_icon: {
    width: px2dp(83),
    height: px2dp(83),
    marginTop: px2dp(16),
  },
  nav_text: {
    color: '#333',
    fontSize: px2dp(24),
    marginTop: px2dp(2),
    textAlign: 'center',
    marginBottom: px2dp(26),
  },
  nav_btn: {
    justifyContent: 'center',
  },
  study_history: {
    backgroundColor: '#fff',
    marginTop: px2dp(24),
  },
  content_head: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: px2dp(40),
    marginRight: px2dp(34),
    justifyContent: 'space-between',
    height: px2dp(64),
  },
  head_left: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  title_line: {
    width: px2dp(6),
    height: px2dp(30),
    backgroundColor: '#EB0029',
    borderRadius: px2dp(3),
  },
  head_title: {
    marginLeft: px2dp(11),
    color: '#333',
    fontSize: px2dp(28),
    fontWeight: '800',
  },
  head_more: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  more_text: {
    color: '#999',
    fontSize: px2dp(20),
    marginRight: px2dp(12),
  },
  right_icon: {
    width: px2dp(8),
    height: px2dp(12),
  },
  live_container: {
    marginHorizontal: px2dp(30),
  },
  live_list: {
    width: px2dp(171),
    marginHorizontal: px2dp(12),
  },
  live_cover: {
    width: px2dp(171),
    height: px2dp(189),
    backgroundColor: '#f7f7f7',
  },
  start: {
    position: 'absolute',
    left: '50%',
    top: '50%',
    width: px2dp(32),
    height: px2dp(32),
    marginTop: px2dp(-16),
    marginLeft: px2dp(-16),
  },
  live_text: {
    marginTop: px2dp(18),
    color: '#333',
    fontSize: px2dp(18),
    marginBottom: px2dp(28),
    lineHeight: px2dp(26),
  },
  gap: {
    height: px2dp(24),
  },
  list_container: {
    backgroundColor: '#fff',
    paddingHorizontal: px2dp(37),
  },
  list: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: px2dp(88),
    borderBottomColor: '#eee',
    borderBottomWidth: px2dp(1),
  },
  list_left: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  list_icon: {
    width: px2dp(34),
    height: px2dp(34),
    marginRight: px2dp(19),
  },
  list_text: {
    color: '#333',
    fontSize: px2dp(26),
  },
  list_right: {
    width: px2dp(12),
    height: px2dp(22),
  },
});

export default styles;
